<template>
  <div class="system-container">
  <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="page-header">
      <router-link class="back-link" to="/main/renshi">
        <i class="el-icon-arrow-left"></i>
        返回
      </router-link>
      <!-- <el-button style="margin-right: 20px;" type="primary" @click="$router.push('/main/renshi')" icon="el-icon-back">返回</el-button> -->
      <h1>人事制度管理</h1>
    </div>

    <div class="content-wrapper">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-document"></i>
          <span>人事制度文件</span>
        </div>
        <div class="section-desc">人事管理制度与流程规范</div>
      </div>

      <div class="category-grid">
        <!-- 基础申请类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-document-add"></i>
            <h3>基础申请类</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/tiaoxiusq/tiaoxiusq"
            >
              <i class="el-icon-time"></i>
              <span>调休申请单</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/gzyijiaodan/gzyijiaodan"
            >
              <i class="el-icon-refresh"></i>
              <span>工作移交单</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/shouruzm/shouruzm"
            >
              <i class="el-icon-money"></i>
              <span>收入证明</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/xygshiyong/xygshiyong"
            >
              <i class="el-icon-user"></i>
              <span>新员工实习资料表</span>
            </router-link>
          </div>
        </div>

        <!-- 联络函类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-message"></i>
            <h3>联络函类</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/wblianluod/wblianluod"
            >
              <i class="el-icon-position"></i>
              <span>外部联络函</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/nblianluoh/nblianluoh"
            >
              <i class="el-icon-office-building"></i>
              <span>内部联络函</span>
            </router-link>
          </div>
        </div>

        <!-- 稽查表类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-search"></i>
            <h3>稽查表类</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/jichabiao/jichabiao"
            >
              <i class="el-icon-document-checked"></i>
              <span>文件资料稽查表</span>
            </router-link>
          </div>
        </div>

        <!-- 调动审批类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-refresh-right"></i>
            <h3>调动审批类</h3>
          </div>
          <div class="link-list">
            <!-- <router-link class="link-item" to="/main/renshi/renshizhidu/neibudiaodong/neibudiaodong">
              <i class="el-icon-coordinate"></i>
              <span>员工内部调动审批表</span>
            </router-link> -->
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/yfrsyidong/yfrsyidong"
            >
              <i class="el-icon-date"></i>
              <span>月份人事异动令</span>
            </router-link>
          </div>
        </div>

        <!-- 费用核算及维修类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-money"></i>
            <h3>费用核算及维修类</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/dianfeihs/dianfeihs"
            >
              <i class="el-icon-lightning"></i>
              <span>发电费用核算表</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd"
            >
              <i class="el-icon-setting"></i>
              <span>工务维修申请单</span>
            </router-link>
          </div>
        </div>

        <!-- 合同相关类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-document-checked"></i>
            <h3>合同相关类</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/xieyishu/xieyishu"
            >
              <i class="el-icon-tickets"></i>
              <span>协议书</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/xsjiechuyi/xsjiechuyi"
            >
              <i class="el-icon-document"></i>
              <span>协商解除劳动合同协议书一</span>
              <small>（甲方提出解除适用）</small>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/xsjiechuer/xsjiechuer"
            >
              <i class="el-icon-document"></i>
              <span>协商解除劳动合同协议书二</span>
              <small>（乙方解除适用）</small>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/xdlaodonght/xdlaodonght"
            >
              <i class="el-icon-document-add"></i>
              <span>续订劳动合同确认书</span>
            </router-link>
          </div>
        </div>

        <!-- 放行及档案管理类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-folder"></i>
            <h3>放行及档案管理类</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/ygwaichufxd/ygwaichufxd"
            >
              <i class="el-icon-position"></i>
              <span>员工外出放行单</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/rsdangangl/rsdangangl"
            >
              <i class="el-icon-notebook-1"></i>
              <span>人事档案管理手册</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/rsdajiechu/rsdajiechu"
            >
              <i class="el-icon-document"></i>
              <span>人事档案 借出 调阅 申请单</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiao"
            >
              <i class="el-icon-delete"></i>
              <span>人事档案 注销 报废 申请单</span>
            </router-link>
          </div>
        </div>

        <!-- 职位说明类 -->
        <div class="category-card">
          <div class="category-header">
            <i class="el-icon-user"></i>
            <h3>职位说明类/管理规定</h3>
          </div>
          <div class="link-list">
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/qyzhiweisms/qyzhiweisms"
            >
              <i class="el-icon-document"></i>
              <span>企管人资组 人事专员职位说明书</span>
            </router-link>
            <router-link
              class="link-item"
              to="/main/renshi/renshizhidu/rsdaguanligd/rsdaguanligd"
            >
              <i class="el-icon-guide"></i>
              <span>人事档案管理规定</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- <script>
export default {
mounted() {
    this.checkScrollbar();
    window.addEventListener('resize', this.checkScrollbar);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScrollbar);
  },
  methods: {
    checkScrollbar() {
      const div = this.$refs.chart;
      if (document.body.scrollHeight > window.innerHeight) {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
  }
};
</script> -->
<style lang="scss" scoped>
.system-container {
  min-height: 100vh;
  // background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    width: 800px;
    margin: 0px auto 25px auto;

    .back-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #409eff;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .content-wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
    width: 800px;
    margin: 0px auto 0px auto;

    .section-header {
      text-align: center;
      margin-bottom: 40px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409eff, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 20px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 18px;
      }
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 800px;
      margin: 0px auto;
      gap: 24px;
      // padding: 0 20px;

      .category-card {
        background-color: #f5f7fa;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        overflow: hidden;

        .category-header {
          display: flex;
          align-items: center;
          padding: 16px;
          background: linear-gradient(135deg, #409eff, #66b1ff);
          color: white;

          i {
            font-size: 20px;
            margin-right: 8px;
          }

          h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
          }
        }

        .link-list {
          padding: 16px;

          .link-item {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #606266;
            padding: 12px;
            border-radius: 4px;
            transition: all 0.3s ease;
            margin-bottom: 8px;

            i {
              font-size: 16px;
              margin-right: 8px;
              color: #409eff;
            }

            span {
              flex: 1;
              font-size: 14px;
            }

            small {
              color: #909399;
              font-size: 12px;
              margin-left: 8px;
            }

            &:hover {
              background-color: #ecf5ff;
              color: #409eff;
              transform: translateX(5px);
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .system-container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content-wrapper {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;

          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;

        .category-card {
          .category-header {
            padding: 12px;

            i {
              font-size: 18px;
            }

            h3 {
              font-size: 14px;
            }
          }

          .link-list {
            padding: 12px;

            .link-item {
              padding: 10px;

              i {
                font-size: 14px;
              }

              span {
                font-size: 13px;
              }

              small {
                font-size: 11px;
              }
            }
          }
        }
      }
    }
  }
}
</style>